﻿@{
    ViewBag.Title = "FindElements";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style type="text/css">
	.list {
		border:3px double green;
		width:350px;
	}
	.newRecord {
		font-weight: bold;
	}
	.tblHdr {
		background-color: blue;
	}
	.listDepartments {
		width: 200px;
	}
</style>

<h2>Find Elements</h2>

<strong>Employees:</strong>
<table class="list">
	<tr class="tblHdr">
		<td>Employee Name</td><td>Department Name</td><td>Salary</td>
	</tr>
	<tr>
		<td>Jane Smith</td><td>Marketing</td><td>$95,000</td>
	</tr>
	<tr class="newRecord">
		<td>John Smith</td><td>Technology</td><td>$90,000</td>
	</tr>
	<tr>
		<td>Brian Adam</td><td>Sales</td><td>$72,000</td>
	</tr>
	<tr>
		<td>Mary Jones</td><td>Customer Support</td><td>$60,000</td>
	</tr>
	<tr>
		<td>Michael Jefferson</td><td>Technology</td><td>$85,000</td>
	</tr>
</table><br>
   
<strong>Departments:</strong>
<div>
	<ul class="list">
		<li>Marketing</li>
		<li>Sales</li>
		<li class="newRecord">Technology</li>
		<li>Customer Support</li>
	</ul>
</div><br>
   
<input id="btnTestIt" type="button" value="Test It">

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnTestIt").click(function () {
            $("table, ul").find(".newRecord").css("background-color", "green");
        });
    });
</script>


